<template>
    <div class="bg">
        <div class="bj" v-if="islogin=='wait'">
            <span class="fa fa-spinner fa-3x fa-pulse" style="margin-top:80%;color:white"></span>
        </div>
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;color:#fff"
         >个人中心
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>

        <div class="inf">
            <div @touchstart='avatar'>
                <img :src="loginInf.avatar?'/api/images/avatar/'+loginInf.avatar:'/static/img/noavatarl.jpg'">
            </div>
            <div style="width:80%">
                <P style="text-align:left">{{loginInf.name?loginInf.name:"请先登录"}}</P>
                <p style="display:flex;justify-content: space-between;font-size:13px"><span style="color:#aaa">VIP0</span><span style="color:red">升级</span></p>
            </div>
        </div>

        <div class="con">
            <div style="display:flex;height:45px;">
                <span class="fa fa-dollar icon" style="color:#f68175"></span>
                <p class="te1">0书海币</p>
            </div>
            <div style="display:flex;height:45px;">
                <span class="fa fa-yen icon" style="color:#f68175"></span>
                <p class="te2">赠送0.00书海币</p>
            </div>
            <div style="display:flex;height:45px;">
                <span class="fa fa-sign-in icon"
                style="color:#71cdb6"></span>
                <p class="te">充值记录</p>
            </div>
            <div style="display:flex;height:45px;">
                <span class="fa fa-sign-out icon"
                style="color:#ccbfe2"></span>
                <p class="te">消费记录</p>
            </div>
        </div>

        <div class="con">
            <router-link to="/bcview/read">
                <div style="display:flex;height:45px;">
                    <span class="fa fa-wpforms icon"
                    style="color:#FFAB75"></span>
                    <p class="te">最近阅读</p>
                </div>
            </router-link>
            <router-link to="/bcview/collections">
                <div style="display:flex;height:45px;">
                    <span class="fa fa-list-alt icon"
                    style="color:#FFAB75"></span> 
                    <p class="te">我的收藏</p>
                </div>
            </router-link>
            <div style="display:flex;height:45px;">
                <span class="fa fa-envelope-o icon"
                style="color:#54b3d8"></span>
                <p class="te">我的消息</p>
            </div>
            <div style="display:flex;height:45px;">
                <span class="fa fa-text-height icon"
                style="color:#89AEDC"></span>
                <p class="te">我的书评</p>
            </div>
        </div>


        <!--更换头像-->
        <transition name="zhe">
            <div class="bj" v-show="changeAvatar"    @touchstart.self="changeAvatar = false"></div>
        </transition>
        <transition name="textbox">
            <div v-show="changeAvatar" class="avat">
                <div class="inppp">
                    <label for="avatar" id="file-label" ref="iii">+
                    </label>
                    <input 
                        style="display:none"
                        type="file" 
                        id="avatar" 
                        accept="image/jpeg,image/png,image/gif"
                        multiple
                        @change="upimg"
                    >
                    <button @touchstart="btnclick" class="bttn">提&emsp;交</button>
                </div>
            </div>
        </transition>
        
        <button class="butt" @touchstart="dian">退出登录</button>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { XHeader } from 'vux'
    export default{
        data:function(){
            return {
                changeAvatar:false,
                imgg:null,
            }
        },
        components:{
            XHeader
        },
        computed:{
            ...mapState([
                "loginInf",
                "islogin"
            ]),
        },
        methods:{
            dian:function(){
                this.http.get("/api/users/tui").then(res=>{
                    var a =this;
                    this.$vux.alert.show({
                        title:res.data.msg,
                        onHide(){
                            if(res.data.err){
                                location.href = "/#/login"
                            }else{
                                a.$store.commit("settuiLogin","");
                                location.href = "/#/"
                            }
                        }
                        
                    })
                })
            },
            avatar:function(){
                if(this.$store.state.islogin){
                    this.changeAvatar = !this.changeAvatar;
                }
            },
            upimg:function(e){
                this.imgg = e.target.files[0];
                var url = URL.createObjectURL(e.target.files[0]);
                // this.$refs.iii.src = url;
                this.$refs.iii.style.backgroundImage = "url("+url+")";
                this.$refs.iii.textContent = '';
            },
            btnclick:function(){
                var data = new FormData();
                data.append("avatar",this.imgg)
                this.http.post("/api/users/avatar",data).then(res=>{
                    this.$vux.alert.show({
                        title: res.data.msg,
                        onHide(){
                            if(!res.data.err){
                                this.changeAvatar =false;
                                // this.$store.commit("setLoginInfo",res.data.data);
                                location.reload(true)
                            }  
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>
    XHeader{
        position: relative;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
        
    }
    .inf{
        width: 100%;
        height: 120px;
        display: flex;
        padding: 20PX 10PX;
        background: url("/static/img/bg_banner.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .inf img{
        width: 85px;
        height: 85px;
        border-radius: 50%;
    }
    .butt{
        background-color: #55BEC1;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border: none;
        height: 60px;
        font-size: 25px;
    }
    .avat{
        position: absolute;
        background-color: #444444;
        left: 25%;
        top: 25%;
        color: white;
        width: 200px;
        height: 200px;
    }
    #file-label{
        width: 100%;
        height: 170px;
        color: black;
        background-color: white;
        background-size: 100% 100%;
        border: solid 1px black;
        display: inline-block;
        font-size: 150px;
        text-align: center;
        line-height: 170px;
        /*vertical-align: top;*/
    }
    .bttn{
        width: 100%;
        height: 30px; 
        background-color: aqua;
        border: solid 1px black;
    }
    .bj{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .con{
        margin-top:20px;
        background-color:white;
        border:solid 3px #ddd;
        border-left: none;
        border-right: none;
        padding-left: 10px;
    }
    .icon{
        font-size: 20px;
        width: 12%;
        line-height: 45px;
    }
    .te,.te1,.te2{
        border-bottom:solid 1px #ddd;
        line-height: 45px;
        width: 88%;
        text-align: left;
        font-size: 20px;
        color: #444444;
        font-family: "楷体";
        margin: 0;
    }
    .te::after{
        content: ">";
        position: absolute;
        right: 8px;
        
    }
    .te1::after{
        content: "充值";
        position: absolute;
        right: 5px;
        
    }.te2::after{
        content: "明细";
        position: absolute;
        right: 5px;
    }
    .textbox-leave-active{
        animation: disappear 0.7s
    }
    .textbox-enter-active{
        animation: appear 0.7s
    }
    .zhe-leave-active{
        animation: dissappear ease 0.7s
    }
    .zhe-enter-active{
        animation: aappear ease 0.7s
    }
</style>